<!-- src/components/LoginComponent.vue -->
<template>
  <div class="login-content-box">
    <div style="background-color: white;  display: flex;">
      <!-- 左侧背景图 -->
      <div class="login-left"></div>
      <!-- 右侧表单区域 -->
      <div class="login-right">
        <div class="login-title" >账号登录</div>
        <div class="login-form">
          <el-form ref="loginRef" hide-required-asterisk="true" label-position="top" :rules="loginRules" label-width="auto" :model="loginForm"  style="width: 100%">
            <el-form-item label="用户名" prop="username">
              <el-input v-model="loginForm.username" :prefix-icon="User" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
              <el-input v-model="loginForm.password" show-password :prefix-icon="Lock" />
            </el-form-item>

            <div class="checkbox-forgot-item">
              <div><el-checkbox  class="custom-checkbox" v-model="loginForm.remember">记住密码</el-checkbox></div>
              <div @click="handleForgotPassword" class="no-hover-underline">忘记密码？</div>
            </div>

            <el-form-item>
              <el-button type="primary" @click="handleLogin()"  :loading="isLoading" style="width: 100%">登陆</el-button>
            </el-form-item>

            <div style="text-align: center;letter-spacing: 1px; font-size: 14px">
              <span style="color: #5f6168;">还没有账号?</span>
              <span style="color: #43A2A3;cursor: pointer;" @click="handleRegister">立即注册</span>
            </div>

          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import { useRouter } from 'vue-router'
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
const emit = defineEmits(['switch-view']);
import { User, Lock,Phone } from '@element-plus/icons-vue';
import useUserStore from "@/store/modules/user.js";
import {SelectData as getTenantList} from "@/api/system/tenant.js";
const userStore = useUserStore();
const router = useRouter();
const { proxy } = getCurrentInstance();
const tenantSelected=ref('defalut');
const loading = ref(false);
const tenantList=ref([]);
const loginForm = ref({
  username: "",
  password: "",
  rememberMe: false,
  code: "",
  uuid: "",
});
const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};
const isLoading = ref(false);
const handleForgotPassword = () => {
  emit('switch-view', 'ForgetComponent');
};

const handleRegister = () => {
  emit('switch-view', 'RegisterComponent');
};

function handleLogin() {
  proxy.$refs.loginRef.validate(valid => {
    if (valid) {
      loading.value = true;
      if (loginForm.value.rememberMe) {
        Cookies.set("username", loginForm.value.username, { expires: 30 });
        Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 });
        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
      } else {
        // 否则移除
        Cookies.remove("username");
        Cookies.remove("password");
        Cookies.remove("rememberMe");
      }
      // 调用action的登录方法
      const currentTenantId = tenantList.value.filter(x=>x.name==tenantSelected.value)[0]?.id??null;
      userStore.login(loginForm.value,currentTenantId).then(() => {
        loading.value = false;
        router.push({name: 'SystemSelect'})
      }).catch(() => {
        loading.value = false;
      });
    }
  });
}
function getCookie() {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const rememberMe = Cookies.get("rememberMe");
  loginForm.value = {
    username: username === undefined ? loginForm.value.username : username,
    password: password === undefined ? loginForm.value.password : decrypt(password),
    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
  };
}
async function getTenant() {
  const data =await getTenantList();
  tenantList.value= [{name:"defalut"}, data];
}
getCookie();
getTenant();
</script>
<style scoped lang="scss">
.login-content-box{
  width: 100%;
  background-color: #f5f7fa;
  .login-left {
    width: 300px;
    margin-right: 10px;
    background-size: cover;        // 覆盖整个容器
    background: url("../assets/main_app/登录时图片.png") no-repeat center center;
    background-size: 100% 100%;
    borerder-radius: 10px !important;
  }
  .login-right {
    flex: 1;
    border-radius: 0 10px 10px 0;
    box-shadow: 0 2px 12px rgba(215, 85, 85, 0.1);
    padding: 20px 20px;
    .login-title{
      font-size: 22px;
      font-weight: bolder;
      padding-bottom: 10px;
      letter-spacing: 2px;
    }
    .login-form {
      .el-button{
        background-color: #43A2A3;
        letter-spacing: 2px;
        height: 40px;
        width: 100%;
      }
      .no-hover-underline{
        cursor: pointer;
        color: #43A2A3;
        font-size: 14px;
      }
      /* 自定义复选框选中颜色 */
      .custom-checkbox {
        /* 控制选中状态的背景色和边框色 */
        --el-checkbox-checked-bg-color: #43A2A3; /* 复选框选中后的背景色 */
        --el-checkbox-checked-border-color: #43A2A3; /* 复选框选中后的边框色 */
        --el-checkbox-indeterminate-bg-color: #43A2A3; /* 半选状态的背景色 */
        --el-checkbox-indeterminate-border-color: #43A2A3; /* 半选状态的边框色 */
      }
      /* 可选：修改复选框的大小 */
      .custom-checkbox .el-checkbox__inner {
        width: 16px;
        height: 16px;
      }
      /* 可选：修改勾选图标的颜色 */
      .custom-checkbox .el-checkbox__inner::after {
        border-color: #fff; /* 勾选图标的颜色 */
      }
    }
  }
}
/* 两端对齐的表单项样式 */
.checkbox-forgot-item {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.el-checkbox.is-checked .el-checkbox__label {
  color: #43A2A3;
}
</style>
